<template>
    <div class="page merchants_info">
        <nav-bar title="商户信息" @click-left="$router.back()"></nav-bar>
        <div class="con">
            <van-cell-group title="店铺信息">
                <van-cell title="商户性质" :value="merchantPropertyName||''" />
                <van-cell title="商户名称" :value="formData.name||''" />
                <van-cell title="商户简称" :value="formData.shortName||''" />
                <van-cell title="商户经营范围" :value="merchantTypeName||''" />
                <van-cell title="所在地区" :value="regionName||''" />
                <van-cell title="详细地址" :value="formData.address||''" />
                <van-cell title="邮箱" :value="formData.email||''" />
            </van-cell-group>

            <van-cell-group title="补充信息" v-if="formData.merchantProperty == '1'">
                <van-cell title="统一社会信用代码" :value="formData.licenseNo||''" />
                <van-cell title="企业法人" :value="formData.legalPerson||''" />
            </van-cell-group>
            <van-cell-group title="营业执照" v-if="formData.licensePicture||''">
                <div class="img_con">
                    <upload-img :imgUrl="formData.licensePicture" onlyShow></upload-img>
                </div>
            </van-cell-group>
            <van-cell-group title="商户门头" v-if="formData.shopPicture">
                <div class="img_con">
                    <upload-img :imgUrl="formData.shopPicture" onlyShow></upload-img>
                </div>
            </van-cell-group>
            <van-cell-group title="纸质协议" v-if="formData.agreementPicture">
                <div class="img_con">
                    <upload-img :imgUrl="formData.agreementPicture" onlyShow></upload-img>
                </div>
            </van-cell-group>
            <van-cell-group title="店铺环境" v-if="formData.shopPictures && formData.shopPictures.length>0">
                <div class="img_con" v-for="item in formData.shopPictures" :key="item">
                    <upload-img :imgUrl="item" onlyShow></upload-img>
                </div>
            </van-cell-group>

            <van-cell-group title="身份证信息">
                <van-cell title="姓名" :value="formData.certificateName||''" />
                <van-cell title="身份证号" :value="formData.certificateId||''" />
                <van-cell title="结束日期" :value="formData.certificateExpireDate||''" />
            </van-cell-group>

            <van-cell-group title="银行卡信息">
                <van-cell title="账户类型" :value="formData.accountType|accountType" />
                <van-cell title="卡号" :value="formData.accountNo||''" />
                <van-cell title="预留手机号" :value="formData.bankTel||''" />
                <van-cell title="开户行行号" :value="formData.contactLine||''" />
                <van-cell title="开户行名称" :value="formData.contactLineName||''" />
            </van-cell-group>
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex";

export default {
    name: "merchantsInfo",
    components: {},

    data() {
        return {
            formData: {},
        };
    },

    mounted() {
        this.prepareData();
    },

    methods: {
        // 加载数据
        prepareData() {
            this.$http.collectionFullInfo(this.custInfo.merchantCode).then((resp) => {
                if (resp === false) {
                    return resp;
                }
                this.formData = resp;
            });
        },

        // 返回按钮
        navBack() {
            this.$router.back();
        },

        // 跳转到
        navPushTo() {
            this.$router.push("/pageB");
        },
    },

    computed: {
        ...mapState({
            custInfo: state => state.homeData.custInfo,
        }),

        merchantPropertyName() {
            if (this.formData.merchantProperty == "4") {
                return "个人";
            } else if (this.formData.merchantProperty == "1") {
                return "企业/个体户";
            } else {
                return "";
            }
        },

        merchantTypeName() {
            if (!this.formData.merchantTypeParentName) {
                return "";
            }
            return `${this.formData.merchantTypeParentName}-${this.formData.merchantTypeName}`;
        },

        regionName() {
            if (!this.formData.provinceName) {
                return "";
            }
            return `${this.formData.provinceName}-${this.formData.cityName}-${this.formData.countyName}`;
        },
    },
};
</script>

<style lang="scss" scoped>
.merchants_info {
    width: 100%;

    .con {
        padding-bottom: 100px;
        .img_con {
            // padding: 10px;
        }
    }
}
</style>
